<template v-if="currentIndex==0">
	<view class="data_view box">
		<view class="total_box w100 height_112 br_8 box" :class="{ 'green' :userType == '1' }" v-if="userType == '1'">
			<!-- <image :src="ossUrl+'/data_back'+userType+'.png'" mode="" class="data_back"></image> -->
			<view class="total_content w100 h100 fc_fff fz_12 box" @click="bindDataDetaiil('')">
				<view class="title">
					总业绩
				</view>
				<view class="number box pt_8 pb_12">
					￥
					<text class="fz_24">{{dataView.performanceDto.totalCost||0}}</text>
				</view>
				<view class="">
					退货合计：¥{{dataView.performanceDto.totalReturnCost||0}}
				</view>
			</view>
		</view>
		<view class="total_box w100 height_112 br_8 box" :class="{ 'hongse' :userType == '2' }"  v-if="userType == '2'">
			<!-- <image :src="ossUrl+'/data_back'+userType+'.png'" mode="" class="data_back"></image> -->
			<view class="total_content w100 h100 fc_fff fz_12 box" @click="bindDataDetaiil('')">
				<view class="title">
					总业绩
				</view>
				<view class="number box pt_8 pb_12">
					￥
					<text class="fz_24">{{dataView.performanceDto.totalCost||0}}</text>
				</view>
				<view class="">
					退货合计：¥{{dataView.performanceDto.totalReturnCost||0}}
				</view>
			</view>
		</view>
		<view class="total_box w100 height_112 br_8 box" :class="{ 'juse' :userType == '3' }"  v-if="userType == '3'">
			<!-- <image :src="ossUrl+'/data_back'+userType+'.png'" mode="" class="data_back"></image> -->
			<view class="total_content w100 h100 fc_fff fz_12 box" @click="bindDataDetaiil('')">
				<view class="title">
					总业绩
				</view>
				<view class="number box pt_8 pb_12">
					￥
					<text class="fz_24">{{dataView.performanceDto.totalCost||0}}</text>
				</view>
				<view class="">
					退货合计：¥{{dataView.performanceDto.totalReturnCost||0}}
				</view>
			</view>
		</view>
		<view class="ward_box">
			<view class="single_ward mt_12  height_86 bc_fff br_8 fc_999 fz_12 fc" @click="bindDataDetaiil(1)">
				<view class="fc_999 fz_12">
					今日业绩 {{userType==2||userType==3?'>':''}}
				</view>
				<view class="fc_333">
					￥<text class="fz_20 fb">{{dataView.performanceDto.todayCost||0}}</text>
				</view>
				<view class="">
					退货：¥{{dataView.performanceDto.todayReturnCost||0}}
				</view>
			</view>
			<view class="single_ward mt_12   height_86 bc_fff br_8 fc_999 fz_12 fc" @click="bindDataDetaiil(2)">
				<view class="fc_999 fz_12">
					本月业绩 {{userType==2||userType==3?'>':''}}
				</view>
				<view class="fc_333">
					￥<text class="fz_20 fb">{{dataView.performanceDto.monthCost||0}}</text>
				</view>
				<view class="">
					退货：¥{{dataView.performanceDto.monthReturnCost||0}}
				</view>
			</view>
			<view class="single_ward mt_12  height_86 bc_fff br_8 fc_999 fz_12 fc" @click="bindDataDetaiil(3)">
				<view class="fc_999 fz_12">
					上月业绩 {{userType==2||userType==3?'>':''}}
				</view>
				<view class="fc_333">
					￥<text class="fz_20 fb">{{dataView.performanceDto.previousCost||0}}</text>
				</view>
				<view class="">
					退货：¥{{dataView.performanceDto.previousReturnCost||0}}
				</view>
			</view>
			<view class="single_ward mt_12  height_86 bc_fff br_8 fc_999 fz_12 fc" @click="bindDataDetaiil(4)">
				<view class="fc_999 fz_12">
					本年业绩 {{userType==2||userType==3?'>':''}}
				</view>
				<view class="fc_333">
					￥<text class="fz_20 fb">{{dataView.performanceDto.yearCost||0}}</text>
				</view>
				<view class="">
					退货：¥{{dataView.performanceDto.yearReturnCost||0}}
				</view>
			</view>
		</view>
		<view class="data_content mt_12 br_8">
			<view class="share_header data_header height_40 w100">
				<image :src="ossUrl+'/share_icon.png'" mode="" class="share_icon"></image>
				<view class="ml_4 fz_16 fb fc_333">
					分享数据
				</view>
			</view>
			<view class="data_inner box bc_fff">
				<view class="single_box fc">
					<view class="fc_999 fz_12 mt_6">
						分享商品总次数（次）
					</view>
					<view class="fz_20 fb">
						{{dataView.shareDataDto.totalNum||0}}
					</view>
				</view>
				<view class="data_line">

				</view>
				<view class="single_box fc">
					<view class="fc_999 fz_12 mt_6">
						今日分享商品次数（次）
					</view>
					<view class="fz_20 fb">
						{{dataView.shareDataDto.todayNum||0}}
					</view>
				</view>
			</view>
		</view>
		<view class="data_content mt_12">
			<view class="member_header data_header height_40 w100">
				<image :src="ossUrl+'/membe_icon.png'" mode="" class="share_icon"></image>
				<view class="ml_4 fz_16 fb fc_333">
					会员数据
				</view>
			</view>
			<view class="data_inner box bc_fff">
				<view class="single_box fc" @click="bindList('history')">
					<view class=" title_box fc_999 fz_12 mt_6">
						<text class="mr_7">历史邀请人数</text>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
					<view class="fz_20 fb">
						{{dataView.inviteDataDto.totalNum||0}}
					</view>
				</view>
				<view class="data_line">

				</view>
				<view class="single_box fc" @click="bindList('today')">
					<view class="title_box fc_999 fz_12 mt_6">
						<text class="mr_7">今日邀请人数</text>
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
					<view class="fz_20 fb">
						{{dataView.inviteDataDto.todayNum||0}}
					</view>
				</view>
			</view>
		</view>
		<view class="member_content mt_12 br_6 bc_fff box pb_8">
			<view class="member_top box">
				<view class="header_left">
					<image :src="ossUrl+'/mormal_membe.png'" class="member_icon" mode=""></image>
					<text class="member_name1 fz_16 fb ml_8">普通会员总数</text>
				</view>
				<view class="membe_count fz_16 fc_333">
					<text class=" fz_20 fb"></text>{{dataView.inviteDataDto.ordinaryNum||0}}人
				</view>
			</view>
			<view class="times_box height_67 br_4 w100 mt_8">
				<view class="single_time fc_333 fc">
					<view class="fz_16 fb">
						{{dataView.inviteDataDto.ordinaryThisMonthNum||0}}
					</view>
					<view class="fz_12 mt_4">
						本月新增(人)
					</view>
				</view>
				<view class="single_time fc">
					<view class="fz_16 fb">
						{{dataView.inviteDataDto.ordinaryPreMonthNum||0}}
					</view>
					<view class="fz_12 mt_4">
						上月新增(人)
					</view>
				</view>
				<view
					:class="dataView.inviteDataDto.ordinaryRatioNum&&dataView.inviteDataDto.ordinaryRatioNum>0?'single_time percent_box red_box':'single_time percent_box green_box'">
					<view class="">
						<image
							:src="dataView.inviteDataDto.ordinaryRatioNum&&dataView.inviteDataDto.ordinaryRatioNum>0?ossUrl+'/radar_data_up.png':ossUrl+'/radar_data_down.png'"
							class="green_arrow" mode="">
						</image>
						</image>
						<text class="fz_16 fb ml_5">{{dataView.inviteDataDto.ordinaryRatioNum||0}}%</text>
					</view>
					<view class="fz_12 mt_4">
						{{dataView.inviteDataDto.ordinaryRatioNum&&dataView.inviteDataDto.ordinaryRatioNum>0?'环比上升':'环比下降’'}}
					</view>
				</view>
			</view>
		</view>
		<view class="member_content mt_12 br_6 bc_fff box pb_8">
			<view class="member_top box">
				<view class="header_left">
					<image :src="ossUrl+'/vip_member.png'" class="member_icon" mode=""></image>
					<text class="member_name2 fz_16 fb ml_8">尊享会员总数</text>
				</view>
				<view class="membe_count fz_16 fc_333">
					<text class=" fz_20 fb"></text>{{dataView.inviteDataDto.exclusiveNum||0}}人
				</view>
			</view>
			<view class="times_box height_67 br_4 w100 mt_8">
				<view class="single_time fc_333 fc">
					<view class="fz_16 fb">
						{{dataView.inviteDataDto.exclusiveThisMonthNum||0}}
					</view>
					<view class="fz_12 mt_4">
						本月新增(人)
					</view>
				</view>
				<view class="single_time fc">
					<view class="fz_16 fb">
						{{dataView.inviteDataDto.exclusivePreMonthNum||0}}
					</view>
					<view class="fz_12 mt_4">
						上月新增(人)
					</view>
				</view>
				<view
					:class="dataView.inviteDataDto.exclusiveRatioNum&&dataView.inviteDataDto.exclusiveRatioNum>0?'single_time percent_box red_box':'single_time percent_box green_box'">
					<view class="">
						<image
							:src="dataView.inviteDataDto.exclusiveRatioNum&&dataView.inviteDataDto.exclusiveRatioNum>0?ossUrl+'/radar_data_up.png':ossUrl+'/radar_data_down.png'"
							class="green_arrow" mode="">
						</image>
						</image>
						<text class="fz_16 fb ml_5">{{dataView.inviteDataDto.exclusiveRatioNum||0}}%</text>
					</view>
					<view class="fz_12 mt_4">
						{{dataView.inviteDataDto.exclusiveRatioNum&&dataView.inviteDataDto.exclusiveRatioNum>0?'环比上升':'环比下降’'}}
					</view>
				</view>
			</view>
		</view>
		<view class="member_content mt_12 br_6 bc_fff box pb_8">
			<view class="member_top box">
				<view class="header_left">
					<image :src="ossUrl+'/uni_member.png'" class="member_icon" mode=""></image>
					<text class="member_name3 fz_16 fb ml_8">联盟会员总数</text>
				</view>
				<view class="membe_count fz_16 fc_333">
					<text class=" fz_20 fb"></text>{{dataView.inviteDataDto.allianceNum||0}}人
				</view>
			</view>
			<view class="times_box height_67 br_4 w100 mt_8">
				<view class="single_time fc_333 fc">
					<view class="fz_16 fb">
						{{dataView.inviteDataDto.allianceThisMonthNum||0}}
					</view>
					<view class="fz_12 mt_4">
						本月新增(人)
					</view>
				</view>
				<view class="single_time fc">
					<view class="fz_16 fb">
						{{dataView.inviteDataDto.alliancePreMonthNum||0}}
					</view>
					<view class="fz_12 mt_4">
						上月新增(人)
					</view>
				</view>
				<view
					:class="dataView.inviteDataDto.allianceRatioNum&&dataView.inviteDataDto.allianceRatioNum>0?'single_time percent_box red_box':'single_time percent_box green_box'">
					<view class="">
						<image
							:src="dataView.inviteDataDto.allianceRatioNum&&dataView.inviteDataDto.allianceRatioNum>0?ossUrl+'/radar_data_up.png':ossUrl+'/radar_data_down.png'"
							class="green_arrow" mode="">
						</image>
						</image>
						<text class="fz_16 fb ml_5">{{dataView.inviteDataDto.allianceRatioNum||0}}%</text>
					</view>
					<view class="fz_12 mt_4">
						{{dataView.inviteDataDto.allianceRatioNum&&dataView.inviteDataDto.allianceRatioNum>0?'环比上升':'环比下降’'}}
					</view>
				</view>
			</view>
		</view>
		<view class="member_content mt_12 br_6 bc_fff box pb_8">
			<view class="member_top box">
				<view class="header_left">
					<image :src="ossUrl+'/business_member.png'" class="member_icon" mode=""></image>
					<text class="member_name4 fz_16 fb ml_8">创业会员总数</text>
				</view>
				<view class="membe_count fz_16 fc_333">
					<text class=" fz_20 fb"></text>{{dataView.inviteDataDto.pioneerNum||0}}人
				</view>
			</view>
			<view class="times_box height_67 br_4 w100 mt_8">
				<view class="single_time fc_333 fc">
					<view class="fz_16 fb">
						{{dataView.inviteDataDto.pioneerThisMonthNum||0}}
					</view>
					<view class="fz_12 mt_4">
						本月新增(人)
					</view>
				</view>
				<view class="single_time fc">
					<view class="fz_16 fb">
						{{dataView.inviteDataDto.pioneerPreMonthNum||0}}
					</view>
					<view class="fz_12 mt_4">
						上月新增(人)
					</view>
				</view>
				<view
					:class="dataView.inviteDataDto.pioneerRatioNum&&dataView.inviteDataDto.pioneerRatioNum>0?'single_time percent_box red_box':'single_time percent_box green_box'">
					<view class="">
						<image
							:src="dataView.inviteDataDto.pioneerRatioNum&&dataView.inviteDataDto.pioneerRatioNum>0?ossUrl+'/radar_data_up.png':ossUrl+'/radar_data_down.png'"
							class="green_arrow" mode="">
						</image>
						</image>
						<text class="fz_16 fb ml_5">{{dataView.inviteDataDto.pioneerRatioNum||0}}%</text>
					</view>
					<view class="fz_12 mt_4">
						{{dataView.inviteDataDto.pioneerRatioNum&&dataView.inviteDataDto.pioneerRatioNum>0?'环比上升':'环比下降’'}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import api from "@/service/config/api";
	export default {
		props: {
			userType: {
				default: 4,
				type: Number,
			},
			ossUrl: {
				default: "",
				type: String,
			},
			currentIndex: {
				default: 0,
				type: Number,
			},
		},
		data() {
			return {
				dataView: {},
				timer: null
			}
		},
		created() {
			if(this.userType!=4){
				console.log("页面家在")
			console.log(this.userType)
			this.getDataView()
			this.timer = setInterval(() => {
				this.getDataView()
			}, 10000)
			}
			// this.getDataViewDetail1()
		},
		destroyed() {
			clearInterval(this.timer)
		},
		methods: {
			bindList(type) {
				let date = ""
				if (type == 'today') {
					date = this.$moment(new Date()).format('YYYY-MM-DD')
					console.log("筛选日期")
					console.log(date)

				}
				uni.navigateTo({
					url: `/pages/radar/user_invite?time=${date}`
				})
			},
			bindDataDetaiil(type) {
				if (this.userType == 2 || this.userType == 3) {
					uni.navigateTo({
						url: `/pages/radar/merchant/performanceDetail?viewType=${type}&showType=${this.userType==3?2:1}&managerId=${this.userType==2?uni.getStorageSync("basicUnserInfo").customerId:""}`
					})
				}
			},
			// 获取数据总览
			getDataView() {
				api.post("/user/api/radar/totalDataView", {}).then((res) => {
					if (res && res.code == 0) {

						this.dataView = res.data
					}
					console.log("数据请求")
					console.log(res)
					console.log(this.dataView)
				})
			},

			getDataViewDetail1() {
				api.post("/user/api/radar/tradeDataList", {
					type: "1"
				}).then((res) => {

					this.dataView = res.data
					console.log("数据请求")
					console.log(res)
					console.log(this.dataView)
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.data_view {
		background: #f6f6f6;
		@include set_padding(12rpx, 12rpx);

		.total_box {
			position: relative;

			&.juse {
				background: linear-gradient(129deg, #F08519 0%, #FA9631 100%);
			}

			&.hongse {
				background: linear-gradient(135deg, #FE5A1C 0%, #FE451C 100%);
				
			}

			&.green {
				background: linear-gradient( 135deg, #1C8845 0%, #28A256 100%);
				
			}

			.data_back {
				width: 100%;
				height: 100%;
				display: block;
			}

			.total_content {
				@include set_padding(12rpx, 12rpx);
				position: absolute;
				left: 0;
				top: 0;
			}
		}

		.ward_box {
			@include flex_box(row, wrap, space-between, center);

			.single_ward {
				width: calc((100% - 11px) / 2);
				@include flex_box(column, wrap, center, center);
			}
		}

		.data_content {
			.data_header {

				@include flex_box(row, nowrap, flex-start, center);
			}

			.share_header {
				background: linear-gradient(93deg, #FFF5E5 0%, rgba(255, 245, 229, 0) 100%);
			}

			.member_header {
				background: linear-gradient(93deg, #FFEEE5 0%, rgba(255, 238, 229, 0) 100%);
			}

			.share_icon {
				width: 36rpx;
				height: 36rpx;
			}

			.data_inner {
				@include flex_box(row, nowrap, flex-start, center);
				@include set_padding(16rpx, 0rpx);

				.single_box {
					width: calc((100% -2rpx) / 2);

					.title_box {
						@include flex_box(row, nowrap, center, center);
					}
				}

				.data_line {
					width: 0;
					height: 100rpx;
					border: 1rpx dashed #D7D7D7;
				}
			}
		}

		.member_content {
			@include set_padding(0rpx, 8rpx);
			padding-bottom: 16rpx;

			.member_top {
				@include flex_box(row, nowrap, space-between, center);
				@include set_padding(11rpx, 0rpx);

				.member_icon {
					width: 36rpx;
					height: 36rpx;
					display: block;
				}

				.member_name1 {
					color: #59616E;
				}

				.member_name2 {
					color: #EBB42D;
				}

				.member_name3 {
					color: #115D70;
				}

				.member_name4 {
					color: #A54F12;
				}

			}

			.header_left {
				@include flex_box(row, nowrap, flex-start, center);
			}

			.times_box {
				background: #F5F7FB;
				@include flex_box(row, nowrap, flex-start, center);

				.single_time {
					flex: 1;
					@include flex_box(column, nowrap, center, center);

					.green_arrow {
						width: 24rpx;
						height: 24rpx;
						display: inline-block;
					}
				}

				.percent_box {
					border-left: 2rpx dashed #D7D7D7;
				}

				.green_box {
					color: #00C5A8;
				}

				.red_box {
					color: #F73D3F;
				}
			}
		}
	}
</style>